<div id="tb<?php echo $uniqid;?>">
    <table cellspacing="0" cellpadding="0">
        <tbody>
        <tr>
            <td colspan="3" style="padding-bottom: 5px;">
                <a href="javascript:void(0);" @click="reload" class="l-btn l-btn-small l-btn-plain"><span
                        class="l-btn-left l-btn-icon-left"><i class="iconfont icon-shuaxin"></i><span
                        class="l-btn-text">重载</span></span></a>
                <span class="l-btn l-btn-small l-btn-plain" :class="params.mode=='all'?'selected':''"
                      @click="filter('all')"><span class="l-btn-text">全部</span></span>
                <span class="l-btn l-btn-small l-btn-plain" :class="params.mode=='waiting'?'selected':''"
                      @click="filter('waiting')"><span class="l-btn-text">待入账</span></span>
                <span class="l-btn l-btn-small l-btn-plain" :class="params.mode=='accounted'?'selected':''"
                      @click="filter('accounted')"><span class="l-btn-text">已入账</span></span>
                <span class="l-btn l-btn-small l-btn-plain" :class="params.mode=='cancel'?'selected':''"
                      @click="filter('cancel')"><span class="l-btn-text">已取消</span></span>
                <span class="l-btn l-btn-small l-btn-plain" :class="params.mode=='back'?'selected':''"
                      @click="filter('back')"><span class="l-btn-text">已退回</span></span>
            </td>
        </tr>
        <tr>
            <td><span style="line-height:30px;">分红日期</span>
                <input id="rewardStartOn" v-model="params.start_on" style="width:110px" type="text"
                       class="easyui-datebox"> </input>至
                <input id="rewardEndOn" v-model="params.end_on" style="width:110px" type="text"
                       class="easyui-datebox"> </input>
            </td>
            <td><span style="line-height:30px;">分红类型</span>
                <select v-model="params.class" class="forminput inputstyle textbox-text validatebox-text"
                              style="width:120px">
                <option value="">全部</option>
                <option value="jichajiangli">级差奖励</option>
                <option value="pingjijiangli">平级奖励</option>
            </select>
            </td>
            <td>&nbsp;<select v-model="params.keywordsType" class="forminput inputstyle textbox-text validatebox-text"
                              style="width:120px">
                <option value="agent_id">代理会员ID</option>
                <option value="agent_phone">代理会员手机号</option>
                <option value="buyer_id">下单会员ID</option>
                <option value="buyer_phone">下单会员手机号</option>
                <option value="order_id">订单ID</option>
                <option value="order_sn">订单编号</option>
            </select>&nbsp;<input v-model="params.keywords" placeholder="请输入内容" @keyup.enter="init" @blur="setNew"
                                  class="forminput inputstyle validatebox-text textbox-prompt easyui-validatebox"
                                  type="text" style="width: 200px;"> </input>
            </td>
            <td><a href="javascript:void(0);" @click="init" class="l-btn l-btn-small l-btn-plain"><span
                    class="l-btn-left l-btn-icon-left"><i class="iconfont icon-sousuo"></i><span
                    class="l-btn-text">查询</span></span></a></td>
            <td><a href="javascript:void(0);" @click="exportExcel" class="l-btn l-btn-small l-btn-plain"><span
                    class="l-btn-left l-btn-icon-left"><i class="iconfont icon-xiazai"></i><span
                    class="l-btn-text">导出代理分红</span></span></a></td>
        </tr>
        </tbody>
    </table>
</div>
<div class="con"  style="-moz-user-select:none;">
    <table id="agentReward<?php echo $uniqid;?>"></table>
</div>
<div id="agentRewarddlg" class="easyui-dialog" style="width:840px; height:520px;" title="信息框" closed="true"></div>

<script>
    Vm['<?php echo $uniqid;?>'] = new Vue({
        el: '#tb<?php echo $uniqid;?>',
        data: {
            dataset: [],
            params: {
                sort: 'created_at',
                order: 'desc',
                rows: 10,
                page: 1,
                start_on: '',
                end_on: '',
                class: '',
                keywords: '',
                keywordsType: 'agent_id',
                mode: 'all'
            },
            total: 0,
            totalPage: 0,
        },
        filters: {
            formatDate(nS) {
                return new Date(parseInt(nS) * 1000).toLocaleString().replace(/:\d{1,2}$/, ' ');
            }
        },
        mounted() {
            setTimeout(() => {
                $('#tb<?php echo $uniqid;?> #rewardStartOn').datebox('setValue', this.params.start_on);
                $('#tb<?php echo $uniqid;?> #rewardEndOn').datebox('setValue', this.params.end_on);
                //this.init();
            }, 200);
        },
        methods: {
            init() {
                this.params.start_on = $('#tb<?php echo $uniqid;?> #rewardStartOn').datebox('getValue');
                this.params.end_on = $('#tb<?php echo $uniqid;?> #rewardEndOn').datebox('getValue');
                agentRewardSearch();
            },
            exportExcel() {
                showLoading('.con');
                this.params.start_on = $('#tb<?php echo $uniqid;?> #rewardStartOn').datebox('getValue');
                this.params.end_on = $('#tb<?php echo $uniqid;?> #rewardEndOn').datebox('getValue');
                $.post('/admin/agent/exportReward', this.params, function (data) {
                    hideLoading();
                    if (parseInt(data.ret) === 0) {
                        $.messager.show({
                            title: '提示',
                            msg: data.msg,
                            timeout: 3000,
                            showType: 'slide'
                        });
                        eventmaterialDownload(data.data);
                    } else {
                        $.messager.alert('提示', data.msg, 'warning');
                    }
                }, 'json').fail((response)=> {
                    hideLoading();
                    $.messager.alert('提示', response.responseText, 'warning');
                });
            },
            reload(){
                agentRewardReload();
            },
            setNew() {
                this.params.page = 1;
            },
            page_rows_change() {
                this.params.page = 1;
                this.init();
            },
            page_change() {
                this.init();
            },
            filter(mode) {
                this.params.mode = mode;
                this.init();
            },
            first() {
                this.params.page = 1;
                this.init();
            },
            pre() {
                if (this.params.page > 1) {
                    this.params.page--;
                    this.init();
                }
            },
            next() {
                if (this.params.page < this.totalPage) {
                    this.params.page++;
                    this.init();
                }
            },
            last() {
                this.params.page = this.totalPage;
                this.init();
            },
        }
    });
    var agentRewardReload = function () {
        $("#agentReward<?php echo $uniqid;?>").datagrid('reload');
    };
    var agentRewardSearch = function (id) {
        var height = $(window).height() - $(".top").height() - 46;//表格高度
        var width = $(window).width() - $(".leftmenu").width() - 8;
        $("#agentReward<?php echo $uniqid;?>").datagrid({
            title: '商品分红记录',
            width: width,
            height: height,//高度
            singleSelect: true,//如果为true，则只允许选择一行
            striped: true,//是否显示斑马线效果。
            rownumbers: false,//如果为true，则显示一个行号列。
            pagination: true,//是否显示分页
            pageSize: 15,
            pageList: [15, 30, 40, 50],
            method: 'post',
            sortName: 'id',
            sortOrder: 'desc',
            url: '/admin/agent/reward',
            queryParams: Vm['<?php echo $uniqid;?>'].params,
            fitColumns: true,//真正的自动展开/收缩列的大小，以适应网格的宽度，防止水平滚动。
            nowrap: false,//如果为true，则在同一行中显示数据。设置为true可以提高加载性能。 是否换行
            selectOnCheck: false,
            checkOnSelect: true,
            toolbar: '#tb<?php echo $uniqid;?>',
            rowStyler: function (index, row) {},
            columns: [[
                {field: 'id', title: 'ID', width: fixWidth(5), sortable: true},
                {
                    field: 'title', title: '名称', width: fixWidth(25), formatter: function (value, rowData, rowIndex) {
                        return '<div style="line-height: 20px">'+
                            '<div style="border-bottom: 1px solid rgb(238, 238, 238); color: rgb(211, 153, 5);">(订单ID:' + rowData.order.id + ') '+
                            '订单编号：' + rowData.order.order_sn + '</div><div>' + rowData.order_item.goods_title + '<br>'+
                            '<span style="color: rgb(73, 177, 196);">商品ID:' + rowData.order_item.goods_id + ' | 商品款式：' +
                            rowData.order_item.goods_sku_text + ' | 商品数量：' + rowData.order_item.goods_num + '件</span></div></div>';
                    }
                },
                {
                    field: 'buyer',
                    title: '下单用户',
                    width: fixWidth(15),
                    formatter: function (value, rowData, rowIndex) {
                        return '<div  style="line-height: 20px">ID:' + rowData.buyer.id + '<br>' +
                            '昵称：' + (rowData.buyer.realname ? rowData.buyer.realname : rowData.buyer.nickname) + '<br>' +
                            '电话：' + (rowData.buyer.phone ? rowData.buyer.phone : '') + '</div>';
                    }
                },
                {
                    field: 'agent',
                    title: '分红会员',
                    width: fixWidth(15),
                    formatter: function (value, rowData, rowIndex) {
                        return '<div  style="line-height: 20px">ID:' + rowData.agent.id + '<br>' +
                            '昵称：' + (rowData.agent.realname ? rowData.agent.realname : rowData.agent.nickname) + '<br>' +
                            '电话：' + (rowData.agent.phone ? rowData.agent.phone : '') + '</div>';
                    }
                },
                {field: 'class_text', title: '分红类别', width: fixWidth(5), align: 'center'},
                {field: 'commission_level', title: '会员分组', width: fixWidth(5), align: 'center'},
                {field: 'agent_level', title: '代理身份', width: fixWidth(5), align: 'center', formatter: function (value, rowData, rowIndex) {
                        return rowData.level_info ? rowData.level_info.name : 'unknown';
                    }},
                {field: 'pay_price', title: '订单金额', width: fixWidth(5), align: 'center', formatter: function (value, rowData, rowIndex) {
                        return rowData.order_item ? rowData.order_item.pay_price : 0.00;
                    }},
                {field: 'commission', title: '分红金额', width: fixWidth(5), align: 'center'},
                {field: 'status_name', title: '入账状态', width: fixWidth(5), align: 'center', styler(value, rowData){
                        if (parseInt(rowData.status) === 0) {
                            return 'color:#F00;';
                        } else {
                            return 'color:green;';
                        }
                    }},
                {field: 'created_at', title: '分红时间', width: fixWidth(10), align: 'center', sortable: true},
                {field: 'updated_at', title: '变动时间', width: fixWidth(10), align: 'center', sortable: true},
            ]],
        });
    };
    agentRewardSearch();
    onDatagridResize("#agentReward");
</script>

<style>
    .l-btn-plain {
        border: rgba(0, 0, 0, 0) 1px solid;
    }

    .order-item-rows {
        padding: 4px;
        display: flex;
        min-height: 90px;
        justify-content: space-between;
        align-items: center;
        border-bottom: #eee 1px solid;
    }

    .datagrid-body-row td {
        line-height: 1.8em !important;
    }

    .datagrid-toolbar .selected {
        color: #f1f1f1;
        background: #1065a7;
        border: 1px solid #f0f0f0;
    }

    .tr_color_0 {
        background: #ffffff;
    }

    .tr_color_1 {
        background: #f8f8f8;
    }

    .status_color_0 {
        color: #f89a2d;
    }

    .status_color_1 {
        color: #0eb913;
    }

    .status_color_-1 {
        color: #d33632;
    }

    .status_color_-2 {
        color: #1F1F1F;
    }
</style>